import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    ScrollView,
    Switch,
    DeviceEventEmitter,
} from 'react-native';
import Header from "../../../components/header";

let navigation

let innerColors = [
    { title: '黑色', color: '#010101' },
    { title: '红色', color: '#c92632' },
    { title: '双色', color: '#ffffff' },
    { title: '米灰色', color: '#91877c' },
    { title: '米黄色', color: '#ebd7b5' },
    { title: '棕色', color: '#77421c' },
]

let outColors = [
    { title: '银灰色', color: '#c0c0c0' },
    { title: '深灰色', color: '#888687' },
    { title: '黑色', color: '#010101' },
    { title: '白色', color: '#ffffff' },
    { title: '红色', color: '#c92632' },
    { title: '蓝色', color: '#3c6db0' },
    { title: '咖啡色', color: '#714527' },
    { title: '香槟色', color: '#e6d2b0' },
    { title: '黄色', color: '#fddc31' },
    { title: '紫色', color: '#773a69' },
    { title: '绿色', color: '#9cc76a' },
    { title: '橙色', color: '#ef7930' },
    { title: '棕色', color: '#77421c' },
    { title: '其它', color: '#ffffff' },
]

export default class CarColorPage extends Component {

    constructor(props) {
        super(props);
        let carColorType = this.props.route && this.props.route.params && this.props.route.params.carColorType ? this.props.route.params.carColorType : '0'
        let selectedColor = this.props.route && this.props.route.params && this.props.route.params.selectedColor ? this.props.route.params.selectedColor : ''
        //carColorType，0：外观颜色，1：内饰颜色
        this.state = {
            carColorType: carColorType,
            color: carColorType == '0' ? outColors : innerColors,
            selectedColor: selectedColor,
        }
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={this.state.carColorType == '1' ? '请选择内饰颜色' : '请选择外观颜色'} ></Header>
                <ScrollView style={{ backgroundColor: '#fff', paddingHorizontal: 15 }}>
                    {
                        this.state.color.map((item) => {
                            return (
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.setState({
                                            selectedColor: item.title
                                        }, function () {
                                            if (this.props.route.params.completion) {
                                                this.props.route.params.completion(this.state.selectedColor)
                                            }
                                            navigation.goBack()
                                        })
                                    }}
                                >
                                    {
                                        item.title == '白色' ?
                                            <View style={[styles.colorBox, { color: '#fff', borderWidth: 1, borderColor: '#e4e4e4' }]} /> :
                                            (item.title == '双色' ?
                                                <Image style={styles.colorBox} source={require('source/image/color_double.png')} /> :
                                                item.title == '其它' ?
                                                    <Image style={styles.colorBox} source={require('source/image/color_other.png')} /> :
                                                    <View style={[styles.colorBox, { backgroundColor: item.color }]} />)
                                    }
                                    <Text style={styles.colorText}>{item.title}</Text>
                                    {
                                        this.state.selectedColor == item.title ?
                                            <Image style={styles.selImg} source={require('source/image/single_sel_1.png')} />
                                            :
                                            null
                                    }
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    itemBox: {
        width: '100%',
        height: 45,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3
    },
    colorBox: {
        width: 25,
        height: 25,
        borderRadius: 2
    },
    colorText: {
        marginLeft: 12,
        color: '#333',
        fontSize: 14
    },
    selImg: {
        width: 18,
        height: 18,
        position: 'absolute',
        right: 0,
    }
})